import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";  //node不支持ts,需要执行npm i @types/node
//引入vite-plugin-svg-icons插件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

//引入px-->rem转换插件
import px2rem from "postcss-pxtorem";


export default defineConfig({
  server:{
    port:8080,
    proxy:{
      '/api':{
        target: 'https://pcapi-xiaotuxian-front-devtest.itheima.net',
        changeOrigin:true,
        rewrite:path => path.replace(/^\/api/, '')
      }
    }
  },
  plugins: [
    vue(),
    //使用vite-svg-icons插件
    createSvgIconsPlugin({
      iconDirs:[path.resolve(process.cwd(),"src/assets/icons")],
      symbolId:"icon-[dir]-[name]"
    })
  ],
  //css处理
  css:{
    preprocessorOptions:{
      less:{
        charset:false,
        additionalData:'@import "./src/style/global.less";',  //全局变量引入
      }
    },
    postcss:{
      plugins:[
        px2rem({
          //自适应，px->rem转换
          rootValue:37.5,  //75表示750设计稿,37.5表示375设计稿
          propList:["*"],  //需要转换的属性，这里选择全部进行转换
          selectorBlackList:[".van"],  //过滤掉van-开头的class，不进行rem转换
          exclude:"/node_modules",  //忽略包文件转换rem
        })
      ]
    }
  },
  resolve:{
    //文件系统路径的别名，绝对路径
    alias:{"@":path.resolve("./src")}
  }
})
